<template>
  <section>
    <el-button size="mini" @click="addBtn" type="primary">新建</el-button>
    <el-table :data="list">
      <el-table-column type="index" label="序号"/>
      <el-table-column prop="title" label="标题"/>
      <el-table-column prop="code" label="编码"/>
      <el-table-column prop="description" label="描述"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <el-dialog  title="编辑" :visible.sync="showDialog" v-if="currWidget">
      <el-form label-width="80px">
        <el-form-item label="标题">
          <el-input size="mini" v-model="currWidget.title"></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <el-input size="mini" v-model="currWidget.code"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input size="mini" v-model="currWidget.description"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button size="mini" type="success" @click="confirmBtn">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "widgetList",
    data(){
      return{
        list:null,
        totalPage:0,
        showDialog:false,
        currWidget:null
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    created(){
      this.getList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getList(val-1)
      },
      getList(pageNo){
        this.fetch({name:'getWidgets',data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log('获得的控件列表------',res)
            this.list=res.content
            this.totalPage=res.totalPages
            this.showDialog=false
          }).catch(err=>{
          console.log(err)
          errHandler.handle(this,err)
        })
      },
      addBtn(){
        this.currWidget={departmentId:this.department.id}
        this.showDialog=true
      },
      editBtn(row){
        this.currWidget=row
        this.showDialog=true
      },
      confirmBtn(){
        if(this.currWidget) this.updateWidget(this.currWidget)
        else  this.createWidget(this.currWidget)
      },
      updateWidget(data){
        this.fetch({name:'updateWidget',data:{...data,departmentId: this.department.id}})
          .then(res=>{
            this.$message({type:'success',message:'更新成功'})
            this.getList()
          }).catch(err=>{
          console.log(err)
          errHandler.handle(this,err)
        })
      },
      createWidget(data){
        this.fetch({name:'createWidget',data})
          .then(res=>{
            console.log('新建挂件------',res)
            this.$message({type:'success',message:'保存成功'})
            this.getList()
          }).catch(err=>{
          console.log(err)
          errHandler.handle(this,err)
        })
      }
    }
  }
</script>

<style scoped>

</style>
